<template>
    <div class="main_wrap">
        <div class="pageTop" style="height:40px;color:#fff;">
            <span class="iconfont backHistory" @click="spotCheckView(0)">&#xe6eb;</span>
            <span class="iconfont"  v-focusable @click="backToHomepage" style="float:right;line-height:40px;font-size:17px;margin-right:15px;">&#xe668;</span>
        </div>
        <div class="content_wrap">
            <div class="info_wrap">
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="name">设备名称</td>
                        <td style="line-height: 30px;getcolor:color:#456de6">{{name}}<div class="yjzb-class" @click="chooseTransfer">一键转办</div></td>
                    </tr>
                    <tr>
                        <td class="name">设备编号</td>
                        <td>{{code}}</td>
                    </tr>
                    <tr>
                        <td class="name">运行状态</td>
                        <td v-if="runStatus == '1'">无</td>
                        <td v-else-if="runStatus == '2'">运转</td>
                        <td v-else-if="runStatus == '3'">停止</td>
                        <td v-else-if="runStatus == '4'">异常</td>
                        <td v-else-if="runStatus == '5'">模块异常</td>
                        <td v-else>-</td>
                    </tr>
                    <tr>
                        <td class="name">异常状态</td>
                        <td v-if="errorStatus == '1'">正常</td>
                        <td v-else-if="errorStatus == '2'">异常</td>
                        <td v-else>-</td>
                    </tr>
                    <tr>
                        <td class="name">所在部门</td>
                        <td>{{departmentName}}</td>
                    </tr>
                    <tr>
                        <td style="border-bottom:none;" colspan="2"  class="name">
                            <span class="title">设备点巡检：</span><!-- rowspan="2" -->
                            <div style="margin-bottom: 15px;text-align:center">
                                <table style="width:98%;margin:0 auto; line-height:2;border-collapse: collapse; " border="0" cellpadding="5" cellspacing="0">
                                    <tr style="width:100% !important;">
                                        <td v-if='listType==0' style="width:33%;text-align:left;">剩余时间</td>
                                        <td v-else style="width:33%;text-align:left;">执行时间</td>
                                        <td style="width:33%;">状态</td>
                                        <td style="width:33%;text-align: right;">操作</td>
                                    </tr>
                                    <tr style="width:100%; border-bottom: 1px solid #747480;" v-for="(item, index) in sbdxjList" :key="index" @click="addDeviceCheck(item,item.checkLeader.split(',').indexOf(userIdNum) != -1)">
                                        <td style="width:33%;text-align:left;">{{ item.remainTime | timeStamp }}</td>
                                        <td style="width:33%;" v-if='item.status=="1"'><span style="color:#456de6;" :class="['topTableContent',{border1:item.checkLeader.split(',').indexOf(userIdNum) != -1}]">可执行</span></td>
                                        <td style="width:33%;" v-else-if='item.status=="2"'><span style="color:#ffffff;" :class="['topTableContent',{border2:item.checkLeader.split(',').indexOf(userIdNum) != -1}]">待执行</span></td>
                                        <td style="width:33%;" v-else-if='item.status=="3"'><span style="color:#ffffff;" :class="['topTableContent',{border3:item.checkLeader.split(',').indexOf(userIdNum) != -1}]">已执行</span></td>
                                        <td style="width:33%;"  v-else-if='item.status=="4"'><span style="color:#ff9900;" :class="['topTableContent',{border4:item.checkLeader.split(',').indexOf(userIdNum) != -1}]">已逾期</span></td>
                                        <td style="width:33%;"  v-else-if='item.status=="5"'><span style="color:#ff9900;" :class="['topTableContent',{border5:item.checkLeader.split(',').indexOf(userIdNum) != -1}]">逾期执行</span></td>
                                        <td v-else>--</td>
                                        <td style="width:33%;text-align: right;"
                                            v-if="item.checkLeader.split(',').indexOf(userIdNum) != -1"
                                            @click.stop="chooseDeviceTransfer(item,item.checkLeader.split(',').indexOf(userIdNum) != -1)">
                                            <span style="display:inline-block; padding:1px 10px; box-sizing:border-box; color:#456de6; border:1px solid #456de6;">转办</span>
                                        </td>
                                        <td style="width:33%;text-align: right;" v-else><span style="color:#fff;">{{item.operatorName}}</span></td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="border-bottom:none;" colspan="2"  class="name"><span class="title">部件点巡检：</span>
                            <div style="text-align:center">
                                <table style="width:98%;margin:auto;border-collapse: collapse;" border="0" cellpadding="3" cellspacing="0">
                                    <tr style="width:100%;">
                                        <td style="width:30%; text-align:left;">部件名称</td>
                                        <td v-if='listType==0' style="width:34%;">剩余时间</td>
                                        <td v-else style="width:30%;">执行时间</td>
                                        <td style="width:20%">状态</td>
                                        <td style="width:25%;text-align:right;">操作</td>
                                    </tr>
                                    <tr style="border-bottom: 1px solid #747480;" v-for="(item, index) in bjdxjList" :key="index" @click="addComponentCheck(item,item.checkLeader.split(',').indexOf(userIdNum) != -1)">
                                        <td style="text-align: left;">{{ item.componentName}}</td>
                                        <td>{{ item.remainTime | timeStamp}}</td>
                                        <td style="padding:0;" v-if='item.checkResult=="1"'><span style="color:#456de6" :class="['bottomTableContent',{border1:item.checkLeader.split(',').indexOf(userIdNum) != -1}]">可执行</span></td>
                                        <td style="padding:0;" v-else-if='item.checkResult=="2"'><span style="color:#ffffff;" :class="['bottomTableContent',{border2:item.checkLeader.split(',').indexOf(userIdNum) != -1}]">待执行</span></td>
                                        <td style="padding:0;" v-else-if='item.checkResult=="3"'><span style="color:#ffffff;" :class="['bottomTableContent',{border3:item.checkLeader.split(',').indexOf(userIdNum) != -1}]">已执行</span></td>
                                        <td style="padding:0;" v-else-if='item.checkResult=="4"'><span style="color:#ff9900;" :class="['bottomTableContent',{border4:item.checkLeader.split(',').indexOf(userIdNum) != -1}]">已逾期</span></td>
                                        <td style="padding:0;" v-else-if='item.checkResult=="5"'><span style="color:#ff9900;" :class="['bottomTableContent',{border5:item.checkLeader.split(',').indexOf(userIdNum) != -1}]">逾期执行</span></td>
                                        <td v-else>--</td>
                                        <td style="padding:0 !important;text-align:right;width:25%;"
                                            v-if="item.checkLeader.split(',').indexOf(userIdNum) != -1"
                                            @click.stop="chooseCompTransfer(item,item.checkLeader.split(',').indexOf(userIdNum) != -1)">
                                            <span style="color:#456de6;line-height:32px;border:1px solid #456de6;display:inline-block;padding:0px 10px; box-sizing:border-box;">转办</span>
                                        </td>
                                        <td style="text-align:right;width:25%;" v-else>
                                            <span style="color:#fff">{{item.operatorName}}</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="bottom-style" style="">
                <div @click="spotCheckView(1)" style="width:50%;float:left; color:#456de6;background-color:#11111f;">可执行</div>
                <div class="scan" @click="scanAdd" style="width:49%;background-color:#11111f;float:right;border-left: 1px solid rgba(204, 204, 204, 0.65);color:#456de6">
                   <span class="iconfont" style="float:left;margin-left:33%">&#xe60a;</span>
                   <span style="float:left;">扫码</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { XTable} from 'vux';
import ShortcutMenu from "../../components/common/shortcut_menu.vue";
let _this = null;
export default {
    components: {
        XTable,
        "shortcut-menu":ShortcutMenu,
    },
    data(){
        return {
            name:'',
            id:'',
            deviceInfo:{},
            runStatus:'',
            errorStatus:'',
            status:'',
            departmentName: '',
            code:'',
            cpmponentCheckDatas:[],
            CheckResult:'',
            checkTime:'',
            checkId: '',
            departmentId:'',
            sbdxjList:[],
            bjdxjList:[],
            userIdNum:0,
            curDepartment: {
                departmentName:'全企业',
                id:0
            },
            listType:'',
            url:'',
            transferStatus:false,
        }
    },
    mounted() {
    },
    //返回首页的公共方法
    inject: ["backToHomepage"],
    created() {
        _this = this;
        this.getDomin();
        this.getUser();
        this.getRouterData();
        let localUrl = location.href.split('#')[0];
        this.$http(this.$API.getWxSign,{url:encodeURIComponent(localUrl)}, true).then((res) => {
            if (res){
                wx.config({
                debug: false,
                appId: res.appId, // 必填,公众号的唯一标识
                timestamp: res.timestamp, // 必填,生成签名的时间戳
                nonceStr: res.nonceStr, // 必填,生成签名的随机串
                signature: res.signature, // 必填,签名
                jsApiList: ['scanQRCode',] // 必填,需要使用的JS接口列表
                });
                /* 处理失败验证 */
                wx.error(function (res) {
                console.log("res:====>",res);
                // config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
                });
            }
        });
    },
    methods: {
        getDomin: function(){
            this.url = window.location.protocol +'//'+ window.location.host;
        },
        //扫码添加
        scanAdd: function () {
            let strUrl = '';
            wx.ready(()=>{
                wx.scanQRCode({ // 微信扫一扫接口
                desc: 'scanQRCode desc',
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
                success: function (res) {
                //扫码之后返回设备信息，获取设备id，跳转对应页面
                strUrl = res.resultStr;
                let name="state";
                let reg = new RegExp('(^|&)' + name + '=([^&]*)(#|$)', 'i');
                let r = strUrl.substr(1).match(reg);
                let id = '';
                if (r != null) {
                    id =  r[2].split("#")[0];
                }
                    if(strUrl.indexOf(location.hostname) != -1){
                        window.location.href = _this.url + '/#/operaionManage/spotCheck/componentCheck?deviceId=' + id;
                    }else{
                       this.$commom.alert('请输入正确的手机号码');;
                    }

                }
            })
            }).catch((error)=>{
                console.log(error)
            });
        },
        spotCheckView(index){
            if (index == 0) {
                history.back(-1)
            } else {
                this.$router.push({path: '/operaionManage', query:{index: 0, checkSecondTabIndex: 0}})
            }
          // window.location.href = _this.url + '/#/operaionManage/spotCheck?department='+JSON.stringify(_this.curDepartment);
        },
        getUser(){
            if(this.$store.state.user){
                this.userIdNum = this.$store.state.user.id;
            }
            if(this.userIdNum == 0){
                this.$http(this.$API.getUserInfo, true).then((res) => {
                    if(res){
                        this.userIdNum = res.id;
                    }
                })
            }
        },

        // 获取跳转传输参数
        getRouterData() {
            if(this.$route.query.deviceId){
                this.deviceId = this.$route.query.deviceId;
                this.listType = 0;
                this.deviceInfo.id = this.deviceId;
            }/* else{
                this.listType = this.$route.query.listType
                this.deviceId = this.$route.query.deviceInfo.id;
                this.deviceInfo = this.$route.query.deviceInfo;
            } */
            this.getCheckRecordList();
        },

        // 获取设备下设备和部件的点巡检
        getCheckRecordList: function(){
            this.$http(this.$API.loadDeviceInfo, {deviceId:this.deviceId}, true).then((res) => {
                this.departmentName = res.departmentName
                this.departmentId = res.departmentId
                this.deviceId = res.id
                this.name = res.deviceName
                this.runStatus = res.runStatus
                this.errorStatus = res.execptionStatus
                this.status = res.checkResult
                this.code = res.deviceCode
                // this.checkId = res.checkId
                if(this.listType==0){
                    this.$http(this.$API.checkRecordList, {deviceId:this.deviceId,departmentId:this.departmentId}, true).then((res) => {
                        let bjdxj = res.resultList
                        this.bjdxjList = this.upCallback(bjdxj);
                    })
                    this.$http(this.$API.checkDeviceRecordList, {deviceId:this.deviceId,departmentId:this.departmentId}, true).then((res) => {
                       let sbdxj = res;
                        this.sbdxjList = this.upCallback(sbdxj);
                    })
                }else if(this.listType==1){
                    this.$http(this.$API.getCheckWaitRecordList, {deviceId:this.deviceId,departmentId:this.departmentId}, true).then((res) => {
                        let bjdxj = res.resultList
                        this.bjdxjList = this.upCallback(bjdxj);
                    })
                    this.$http(this.$API.getCheckWaitDeviceRecordList, {deviceId:this.deviceId,departmentId:this.departmentId}, true).then((res) => {
                        let sbdxj = res;
                        this.sbdxjList = this.upCallback(sbdxj);
                    })
                }
            })
        },
        // 部件添加点巡检记录
        addComponentCheck:function(config,sfzb){
            if(this.listType == 1){
                return false;
            }
            if(!!!sfzb){
                return false;
            }
            let zb = sfzb
            // debugger
            /* config.deviceName = this.name
            config.deviceCode = this.code
            config.departmentName = this.departmentName */
            /* let deviceId = this.deviceId
            let componentId = config.id
            let id = config.checkId
            let departmentId = this.departmentId */
            this.$router.push({
            name: `addComponentCheck`,
            query: {
                zb: zb,
                deviceId: this.deviceId,
                componentId: config.id,
                id: config.checkId,
                departmentId: this.departmentId
                }
            })
        },
        spotCheckDetail:function(config){
            this.$router.push({
                name: `workSheetDetail`,
                query: {
                    id: config.checkId,
                    checkTime: config.lastCheckTime,
                    queryName: false,
                    name: 'componentCheck'
                    }
                })
        },
        // 添加设备点巡检
        addDeviceCheck: function(item,sfzb){
            if(this.listType == 1){
                return false;
            }
            if(!!!sfzb){
                return false;
            }
            let zb = sfzb;
            // debugger
            /* let config={
                deviceName: this.name,
                deviceCode: this.code,
                deviceId: this.deviceId,
                id: this.checkId,
                status:item.status
            } */
            this.$router.push({
                name: `addDeviceCheck`,
                query: {
                    zb: zb,
                    departmentId: this.departmentId,
                    /* deviceName: this.name,
                    deviceCode: this.code, */
                    deviceId: this.deviceId,
                    id: item.checkId,
                    /* status:item.status,
                    departmentName: this.departmentName, */
                }
            })
        },
        //查看设备点巡检信息
        spotCheckDetailDevice:function(){
          let config = {
            checkId: this.checkId,
            checkTime:this.checkTime
          };
          this.$router.push({
          name: `workSheetDetail`,
          query: {
              id: config.checkId,
              checkTime: config.checkTime,
              queryName: false,
              name: 'deviceCheck'
              }
          })
        },

        // 一键转办
        chooseTransfer: function(){
            // 判断是否可以一键转办
            for(var item of this.bjdxjList){
                if(item.operator == this.userIdNum){
                    this.transferStatus = true;
                }
            }
            for(var item of this.sbdxjList){
                if(item.operator == this.userIdNum){
                    this.transferStatus = true;
                }
            }

            if(!!this.transferStatus){
                this.$router.push({
                    name: `chooseTransfer`,
                    query:{
                        departmentId: this.departmentId,
                        deviceId: this.deviceId,
                        type:'all',
                        listType: this.listType,
                        pageName:'componentCheck',
                        params:{
                            listType:this.listType,
                            deviceInfo:this.deviceInfo,
                        }
                    }
                })
            }
        },

        // 部件点巡检转办
        chooseCompTransfer: function(item,status){
            if(!!status){
                this.$router.push({
                    name: `chooseTransfer`,
                    query:{
                        departmentId: this.departmentId,
                        checkId: item.checkId,
                        type:'component',
                        pageName:'componentCheck',
                        params:{
                            listType:this.listType,
                            deviceInfo:this.deviceInfo,
                        }
                    }
                })
            }
        },

        // 设备点巡检转办
        chooseDeviceTransfer: function(item,status){
            if(!!status){
                this.$router.push({
                    name: `chooseTransfer`,
                    query:{
                        departmentId: this.departmentId,
                        checkId: item.checkId,
                        type:'device',
                        pageName:'componentCheck',
                        params:{
                            listType:this.listType,
                            deviceInfo:this.deviceInfo,
                        }
                    }
                })
            }
        },

        // 排序
        upCallback(data) {
            console.log("排序前",data);
            let canExecute = [],//状态为可执行的数组
                overdueList = [];//状态为其他的数组

            for(var index in data){
              if(data[index].status == 4){
                var checkRecord = data[index];
                canExecute.push(checkRecord)
              }
              else{
                overdueList.push(data[index]);
              }
            }

            let executeList = [];
            for(var index in canExecute){
              if((canExecute[index].checkLeader).split(',').indexOf(this.userIdNum) != -1){
                executeList.unshift(canExecute[index])
              }else{
                executeList.push(canExecute[index]);
              }
            }

            let overList = [];
            for(var index in overdueList){
              if((overdueList[index].checkLeader).split(',').indexOf(this.userIdNum) != -1){
                overList.unshift(overdueList[index])
              }else{
                overList.push(overdueList[index]);
              }
            }
            data = executeList.concat(overList);
            console.log("排序后",data);
            return data;
        }
    }
}
</script>
<style scoped lang="less">
@import '../../styles/iconfont.css';
    body{
        background-color: #22233f;
        height: 100%;
        width: 100%;
    }
    .main_wrap{
        margin: 0 auto;
        height: 100%;
        width: 100%;
        padding-bottom: 20px;
    }
    .content_wrap{
        height: 100%;
        padding-bottom: 50px;
        margin-top:40px;
    }
    .info_wrap{ //info_wrap_table
        padding:10px;
        padding-bottom: 50px;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .info_wrap .yjzb-class{
        width: 70px;
        height: 28px;
        float: right;
        color:#456de6;
        text-align: center;
        line-height: 28px;
        border: 1px rgba(0, 102, 255, 1)solid;
    }
    table{
        width:100%;
        line-height: 40px;
        font-size: 14px;
        color:#fff;
        border-color: rgba(255, 255, 255, 0.5);
        // border: 1px #ffffff solid;
    }
    // table tr td{ border-bottom :1px solid #ffffff; }
    table .name{
        // color: rgba(255, 255, 255, 0.5);
        color:#fff;
        width: 25%;
    }
    .status0{
        color:red;
        border:1px solid red;
        float:right;
        background-color:#22233f;
        height: 30px;
        width: 60px;
    }
    .status2{
        color:#456de6;
        border:1px solid #456de6;
        float:right;
        background-color:#22233f;
        height: 30px;
        width: 60px;
    }

    .status1{
        color:#fff;
        border:1px solid #fff;
        float:right;
        background-color:#22233f;
        height: 30px;
        width: 60px;
    }
    .dataTable{
        padding:0px 10px;
        color: #fff;
        font-size: 16px;
    }
    .vux-table:after{
        border-top: none !important;
    }
    /* .info_wrap table{
        border:none !important;
    } */
    .bottom-style{
        width:100%;
        height:45px;
        bottom:0;
        position:fixed;
        color: #456de6;
        font-size:14px;
        line-height: 45px;
        text-align:center;
        background-color:#21243f;
    }
    .bottom-style .scan{
        float: left;
        width: 28%;
        color:#456de6;
        line-height: 50px;
    }
    .backHistory{
        transform:rotate(90deg);
        -ms-transform:rotate(90deg); 	/* IE 9 */
        -moz-transform:rotate(90deg); 	/* Firefox */
        -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
        -o-transform:rotate(90deg);
        line-height:40px;
        font-size:25px !important;
        margin-left:10px;
    }
    .pageTop{
        height: 40px;
        color: rgb(255, 255, 255,0.3);
        position: fixed;
        height: 40px;
        width: 100%;
        left: 0px;
        top: 0px;
        background-color: #22233f;
    }
    .border1{
        border: 1px solid #456de6;
    }
    .border2{
        border: 1px solid #ffffff;
    }
    .border3{
        border: 1px solid #ffffff;
    }
    .border4{
        border: 1px solid #ff9900 !important;
    }
    .border5{
        border: 1px solid #ff9900;
    }
    .hr{
        width: 100%;
        background: #7474780;
    }
    .topTableContent{
        display:inline-block;
        padding:0 3px;
        box-sizing:border-box;
    }
    .bottomTableContent{
        display:inline-block;
        padding:0px 3px;
        box-sizing:border-box;
        height:31px;
        line-height:31px;
    }
    .title{
        display: block;
        width: 100%;
        padding: 6px 0;
        font-size: 16px;
        background-color: #22233f;
    }
</style>


